<script setup>
// import axios from '@axios'
import { watch } from 'vue'
import { DragHandle, SlickItem, SlickList } from 'vue-slicksort'

const props = defineProps({
  currRow: Object,
})

const emit = defineEmits([
  'updateSql',
])

const currRow = ref(props.currRow)

const sqlJson = ref([])
const itemIndex = ref(1)
if(currRow.value.sqlJson){
  sqlJson.value = JSON.parse(currRow.value.sqlJson)
  itemIndex.value = sqlJson.value.length
}

const list = ref(sqlJson.value)
const formatSql = ref(true)

const addItem = () => {
  list.value.push({ "index": itemIndex, "type": null, "column": null })
  itemIndex.value ++
}

const deleteItem = index => {
  list.value.splice(index, 1)
}

const disabledOption = reactive([])

const columnOption = reactive([])

onMounted(() => {
  columnQuery()
  queryTypeOptionSelect()
})

const queryTypeOptionSelect = () => {
  // axios.post('/db/sql/queryTypeOption', { }).then(r => {
  //   disabledOption.push(...r.data.data)
  // }).catch(e => {
  //   console.error(e)
  // })
}

const columnQuery = () => {
  // axios.post("/db/sql/column/list", currRow.value).then(r => {
  //   columnOption.push(...r.data.data)
  // }).catch(e => {
  //   console.error(e)
  // })
}

const onUpdateList = () => {
  buildQuery()
}

watch(list.value, (newVal, oldVal) => {
  buildQuery()
})

const buildQuery = () => {
  // axios.post("/db/sql/build", Object.assign(currRow.value, { list: list.value, formatSql: formatSql.value })).then(r => {
  //   emit('updateSql', r.data.data)
  // }).catch(e => {
  //   console.error(e)
  // })
}

// 回调信息
const msgVisible = ref(false)
const msgContent = ref('')
const msgColor = ref('error')

const showMsg = res => {
  if(res){
    if(res.code == 200){
      msgVisible.value = true
      msgColor.value = "success"
      msgContent.value = res.message
    }else{
      msgVisible.value = true
      msgColor.value = "error"
      msgContent.value = res.message
    }
  }
}
</script>

<template>
  <div>
    <VSnackbar
      v-model="msgVisible"
      location="top"
      :color="msgColor"
    >
      {{ msgContent }}
    </VSnackbar>
    <VBtn
      size="small"
      @click="addItem"
    >
      新增选项
    </VBtn>
    <VCheckbox
      v-model="formatSql"
      label="是否格式化SQL"
      style="float: inline-end;"
    />
    <SlickList
      v-model:list="list"
      class="query-slick-list"
      axis="y"
      use-drag-handle
      autoscroll
      @update:list="onUpdateList"
    >
      <SlickItem
        v-for="(item, i) in list"
        :key="item.index"
        class="query-slick-item v-card--variant-elevated"
        :index="i"
      >
        <VRow>
          <VCol cols="1">
            <DragHandle>
              <VIcon
                icon="tabler-list"
                style="cursor: move;font-size: 40px;"
              />
            </DragHandle>
          </VCol>
          <VCol cols="6">
            <VAutocomplete
              v-model="item.column"
              label="列名"
              :items="columnOption"
              clearable
            />
          </VCol>
          <VCol cols="4">
            <VAutocomplete
              v-model="item.type"
              label="类型"
              :items="disabledOption"
              clearable
            />
          </VCol>
          <VCol cols="1">
            <VIcon
              icon="tabler-trash"
              style="cursor: pointer;font-size: 40px;"
              @click="deleteItem(i)"
            />
          </VCol>
        </VRow>
      </SlickItem>
    </SlickList>
  </div>
</template>

<style scoped>
.query-slick-list {
  padding-block: 4px;
  padding-inline: 0;
}

.query-slick-item {
  z-index: 2500;
  padding: 8px;
  margin-block: 8px;
  margin-inline: 0;
}
</style>
